<template>
  <view class="evaluateWtapper" v-if="reply && reply.length > 0">
    <view v-for="(item, evaluateWtapperIndex) in reply" :key="evaluateWtapperIndex">
      <view class="evaluateItem" v-if="item">
        <div style="display: flex; gap: 16rpx; padding: 0 30rpx">
          <view class="pictrue">
            <image :src="item.avatar" class="image" />
          </view>
          <div class="detail">
            <view class="pic-text acea-row row-middle">
              <view class="acea-row row-middle">
                <view class="name line1">{{ item.nickname }}</view>
                <view class="start" :class="'star' + item.star"></view>
              </view>
            </view>
            <!--        {{ item.sku||'' }}-->
            <view class="evaluate-infor">{{ item.comment }}</view>
            <view class="imgList acea-row">
              <view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq" style="width: 100rpx; height: 100rpx; border-radius: 0rpx 0rpx 0rpx 0rpx">
                <image :src="itemn" class="image" style="width: 100rpx; height: 100rpx; border-radius: 0rpx 0rpx 0rpx 0rpx" />
              </view>
            </view>
            <view class="time" style="margin-bottom: 20rpx">{{ item.createTime }} </view>
          </div>
        </div>

        <div class="bor"></div>
      </view>
    </view>
  </view>
</template>
<script>
import { dataFormat } from '@/utils/oldIndex';

export default {
  name: 'UserEvaluation',
  props: {
    reply: {
      type: Array,
      default: () => [],
    },
  },
  data: function () {
    return {};
  },
  mounted: function () {
    // console.log(this)
  },
  methods: {
    dataFormat,
  },
};
</script>

<style lang="less" scoped>
.evaluateItem {
  .pictrue {
    width: 68rpx;
    height: 68rpx;
    border-radius: 58rpx 58rpx 58rpx 58rpx;
    image {
      width: 68rpx;
      height: 68rpx;
      border-radius: 58rpx 58rpx 58rpx 58rpx;
    }
  }
  .bor {
    margin: 0 30rpx;
    height: 1rpx;
    background: #e4e4e4;
  }

  .pic-text {
    height: max-content !important;
  }
}
</style>
